{extend name="app/admin/view/base.html"/}
{block name="resources"}
<style>
    .ns-card-common:first-of-type{margin-top: 0;}
	.ns-detail-box {padding: 20px; box-sizing: border-box; border: 1px solid #F1F1F1; display: flex; flex-wrap: wrap;}
    .layui-card-body .content{width: 33.3%; height: 100px; display: flex; flex-direction: column; justify-content: center;}
    .layui-card-body .money{font-size: 20px;color: #666;font-weight: bold;margin-top: 10px;max-width: 250px;}
    .layui-card-body .subhead{font-size: 12px;margin-left: 3px;cursor: pointer;}
</style>

{/block}
{block name='main'}
<div class="layui-card ns-card-common ns-card-brief">
    <div class="layui-card-header">
        <div>
            <span class="ns-card-title">账户概况</span>
        </div>
    </div>
	
    <div class="layui-card-body">
		<div class="ns-detail-box">
			<div class="content">
				<p class="title">总收入(元)</p>
				<p class="money">{$total_account}</p>
			</div>
			
			<div class="content">
				<p class="title">可用余额(元)</p>
				<p class="money">{$website_info.account}</p>
			</div>
			
			<div class="content">
				<p class="title">已转账(元) </p>
				<p class="money">{$website_info.account_withdraw}</p>
			</div>
			
			<div class="content">
				<p class="title">店铺入驻抽成(元) </p>
				<p class="money">{$website_info.account_shop}</p>
			</div>
			
			<div class="content">
				<p class="title">订单结算抽成(元)</p>
				<p class="money">{$website_info.account_order}</p>
			</div>
		</div>
    </div>
</div>

<div class="layui-card ns-card-common ns-card-brief">
    <div class="layui-card-header">
		<span class="ns-card-title">收支记录</span>
    </div>
	
	<div class="layui-card-body">
		<!-- 筛选面板 -->
		<div class="ns-single-filter-box">
			<div class="layui-form">
				<div class="layui-inline">
					<div class="layui-input-inline">
						<input type="text" name="start_time" id="start_time" placeholder="开始时间" class="layui-input" autocomplete="off" readonly>
						<i class="ns-calendar"></i>
					</div>
					<div class="layui-input-inline end-time">
						<input type="text" name="end_time" id="end_time" placeholder="结束时间" class="layui-input" autocomplete="off" readonly>
						<i class="ns-calendar"></i>
					</div>
					<button class="layui-btn layui-btn-primary" lay-submit lay-filter="search">搜索</button>
				</div>
			</div>
		</div>

		<div class="layui-tab ns-table-tab" lay-filter="goods_list_tab">
			<ul class="layui-tab-title">
				<li class="layui-this" data-status="">全部</li>
				<li data-status="1">收入</li>
				<li data-status="2">支出</li>
			</ul>
			<div class="layui-tab-content">
				<!-- 列表 -->
				<table id="account_list" lay-filter="account_list"></table>
			</div>
		</div>
	</div>
</div>


{/block}
{block name="script"}
<script type="text/html" id="account_data">
    {{#  if(d.account_data>0){ }}
    <span style="color: red; padding-right: 50px;">+{{d.account_data}}</span>
    {{#  } else if (d.account_data == 0){ }}
    <span style="padding-right: 50px;">{{d.account_data}}</span>
    {{#  } else { }}
    <span style="color: green; padding-right: 50px;">{{d.account_data}}</span>
    {{#  } }}
</script>

<script>
    var start_time,end_time,repeat_flag = false;

    layui.use(['element','laydate','laytpl','form'], function () {
        var element = layui.element,
            laydate = layui.laydate,
            laytpl = layui.laytpl,
            form = layui.form;
			
		form.render();	
		
        //监听Tab切换，以改变地址hash值
        element.on('tab(goods_list_tab)', function () {
            table.reload({
                page: {
                    curr: 1
                },
                where: {
                    'type': this.getAttribute('data-status')
                }
            });
        });


        //开始时间
        laydate.render({
            elem: '#start_time' //指定元素
            ,done: function(value, date, endDate){
                start_time = ns.date_to_time(value);

            }
        });
        //结束时间
        laydate.render({
            elem: '#end_time' //指定元素
            ,done: function(value, date, endDate){
                end_time = ns.date_to_time(value);
            }
        });

        /**
         * 搜索功能
         */
        form.on('submit(search)', function (data) {
            data.field.start_time = start_time;
            data.field.end_time = end_time;
            table.reload({
                page: {
                    curr: 1
                },
                where: data.field
            });
            return false;
        });


    });

    var table = new Table({
        elem: '#account_list',
        url: ns.url("city://admin/website/dashboard"),
        where:{
            website_id:{$website_id}
        },
        cols: [
            [{
                field: 'account_no',
                title: '流水编号',
                unresize: 'false',
                width:'16%'
            },{
                field: 'type_name',
                title: '收支来源',
                unresize: 'false',
                width:'14%'

            },{
                field: 'account_data',
                title: '<span style="padding-right: 50px;">金额（元）</span>',
                unresize: 'false',
                templet: '#account_data',
                width:'15%',
				align: 'right'
            }, {
                title: '收支类型',
                unresize: 'false',
                width:'8%',
                templet: function (res){
                    return res.account_data > 0 ? "收入" : "支出";
                }

            }, {
                field: 'create_time',
                title: '时间',
                unresize: 'false',
                width:'17%',
                templet: function (res){
                    if(res.create_time == 0){
                        return '--';
                    }else{
                        return ns.time_to_date(res.create_time)
                    }
                }
            }, {
                title: '说明',
                unresize: 'false',
                width:'30%',
                templet: function (res){
                    return '<span title="'+res.remark+'">'+res.remark+'</span>';
                }

            }]
        ]
    });
	

</script>

{/block}